<template>
  <div id="shopLineChart">
    <div ref="chart01"
         class="chart_box"></div>
    <div class="icon_checked">
      <el-checkbox-group v-model="checkedType"
                         @change="checkedTypeFn">
        <!-- <el-checkbox label="0">无</el-checkbox>
        <el-checkbox label="1">添加商品</el-checkbox> -->
        <!--<el-checkbox label="2">讲解商品</el-checkbox>
           <el-checkbox label="3">发放福袋</el-checkbox>
          <el-checkbox label="4">发放优惠卷</el-checkbox>
          <el-checkbox label="5">发放红包</el-checkbox> -->
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
let mychart = null
import testIcon1 from '@/assets/two/goodss.png'
// import testIcon2 from '@/assets/zhao/live/goodss.png';
// import testIcon3 from '@/assets/zhao/live/fudai.png'
// import testIcon4 from '@/assets/zhao/live/discount.png'
// import testIcon5 from '@/assets/zhao/live/redpacket.png'
export default {
  name: 'liveLine',
  components: {},
  props: {
    xData: Array | Object,
    series1: Array | Object,
    series2: Array | Object,
    xIcons: Array | Object, //图标 icon
    name1: String,
    name2: String,
    isSetIcon:Boolean,    //是否添加icon
  },
  // watch:{
  //     series1(a){
  //         console.log(a);
  //     },

  // },
  data() {
    return {
      checkedType: ['0'],
      iconList: [testIcon1, '', '', '', ''],
      iconXConfig:{}
      // iconList:[testIcon1],
    }
  },
  computed: {},
  watch: {
    series1: {
      handler(n, o) {
        this.drawLiveLine()
      },
      deep: true,
    },
    name2: {
      handler(newVal) {
        console.log(newVal)
        this.drawLiveLine()
      },
      deep: true,
    },
    isSetIcon(bool){
        this.checkedTypeFn();
    }
  },

  created() {
    //   初始化图标X轴的配置
       this.iconXConfig = {
        //图标配置
        symbol: `image://${testIcon1}`,
        symbolSize: '20',
        symbolOffset: [0, -10],
        type: 'scatter',
        data: [],
        tooltip: {
          //取消图标的tooltip提示
          show: false,
        },
        symbol : `image://${this.iconList[0]}`,
      }  
      let iconDatas = this.xIcons

      let iconObjs = []
      if (iconDatas) {
        for (let j = 0; j < this.xData.length; j++) {
          let obj = {}
          for (let i = 0; i < iconDatas.length; i++) {
            if (iconDatas[i] == this.xData[j]) {
              obj.value = 0
            }
          }
          iconObjs.push(obj)
        }
      } 
      this.iconXConfig['data'] = iconObjs;
  },
  mounted() {
    if (this.xData) {
      this.$nextTick(() => {
        this.drawLiveLine()
      })
    }
  },

  methods: {
    checkedTypeFn() {
      this.setIconFn() //接口请求成功，把数据处理好后调用，如果无则为空对象
    },
    setIconFn() {
        this.drawLiveLine()
    },
    drawLiveLine(iconListData) {
      // console.log(this.name2)
      let that = this
      let mychart = null
      mychart = that.$echarts.init(that.$refs.chart01)
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
              color: '#e5e5e5',
            },
          },
          extraCssText: 'z-index: 9', //设置消息提示框的层级
          formatter: function (params) {
            let result01 = ''
            params.forEach(function (item) {
              result01 +=
                item.marker +
                ' ' +
                item.seriesName +
                ' : ' +
                that.format_num(item.value) +
                '</br>'
            })
            return params[0].name + '</br>' + result01
          },
        },
        legend: {
          icon: 'rect ',
          top: 10,
          itemWidth: 20,
          itemHeight: 3,
          itemGap: 30,
          textStyle: {
            color: '#555',
          },
        },
        grid: {
          left: '56',
          right: '58',
          bottom: '60',
          containLabel: false,
        },
        xAxis: [
          {
            type: 'category',
            data: this.xData,
            boundaryGap: false, //X轴起始位置靠着Y轴
            //设置网格线颜色
            splitLine: {
              show: false,
              lineStyle: {
                color: ['#e5e5e5'],
                width: 1,
                type: 'dashed',
              },
            },
            // x轴样式
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#e5e5e5', //左边线的颜色
                width: '1', //坐标线的宽度
              },
            },
            axisTick: {
              show: false,
            },
            // x轴字体样式
            axisLabel: {
              // interval: 0,
              // rotate: 40,
              margin: 4,
              show: true,
              textStyle: {
                color: '#888',
                // fontFamily: "DINAlternate-Bold",
                fontSize: 10,
              },
            },
          },
          // /* icon 的 x 方向 */
          //   {
          //   type: "category",
          //   data: this.xIcons,
          //   boundaryGap: false, //X轴起始位置靠着Y轴
          //   //设置网格线颜色
          //   splitLine: {
          //     show: false,
          //     lineStyle: {
          //       color: ["#e5e5e5"],
          //       width: 1,
          //       type: "dashed",
          //     },
          //   },
          //   // x轴样式
          //   axisLine: {
          //     lineStyle: {
          //       type: "solid",
          //       color: "#e5e5e5", //左边线的颜色
          //       width: "1", //坐标线的宽度
          //     },
          //   },
          //   axisTick: {
          //     show: false,
          //   },
          //   // x轴字体样式
          //   axisLabel: {
          //     // interval: 0,
          //     // rotate: 40,
          //     margin: 14,
          //     show: true,  //x轴文字的存在与否
          //     textStyle: {
          //       color: "#888",
          //       // fontFamily: "DINAlternate-Bold",
          //       fontSize: 12,
          //     },
          //   },
          // },
        ],
        yAxis: [
          {
            type: 'value',
            name: this.name1,
            //设置网格线颜色
            nameTextStyle: {
              color: '#888',
              padding: [0, 0, 0, 45],
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#e5e5e5'],
                width: 1,
                type: 'dashed',
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#888',
                fontSize: 12,
              },
              formatter: function (value) {
                return that.format_num(value)
              },
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#e5e5e5', //左边线的颜色
                width: '1', //坐标线的宽度
              },
            },
          },
          {
            type: 'value',
            name: this.name2,
            //设置网格线颜色
            nameTextStyle: {
              color: '#888',
              padding: [0, 0, 0, -55],
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#e5e5e5'],
                width: 1,
                type: 'dashed',
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#888',
                fontSize: 10,
              },
              formatter: function (value) {
                return that.format_num(value)
              },
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#e5e5e5', //右边坐标轴线的颜色
                width: '1', //坐标线的宽度
              },
            },
          },
        ],
        dataZoom: [
          {
            // type: 'slider',
            // realtime: true,
            // start: 0,
            // end: 100,
            // fillerColor: '#f0935e',
            // height: '26',
            type: 'slider',
            show: true,
            height: 22,
            // bottom: 0,
            realtime: true,
            borderColor: 'transparent',
            // backgroundColor: '#f0935e',
            fillerColor: '#f0935e',
            // 拖拽手柄样式 svg 路径
            // handleIcon: 'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z',
            handleIcon: 'M0,0 v9.7h5 v-9.7h-5 Z',
            handleColor: '#fff',
            handleSize: 17,
            handleStyle: {
              color:"#294b97",
              borderColor:'rgba(240, 147, 94, 0.4)',
              borderSize:1,
              shadowBlur: 5,
              shadowColor: 'rgba(240, 147, 94, 0.8)',
              shadowOffsetX: 0, // 阴影偏移x轴多少
              shadowOffsetY: 0 // 阴影偏移y轴多少
            },
            start: 0,
            end: 100,
            textStyle:{
              color:'#f0935e',
            }
          },
        ],
        series: [
          {
            name: this.name1,
            type: 'line',
            smooth: true, //true 为平滑曲线，false为直线
            symbol: 'none', //去掉折线上的小圆点
            data: this.series1,
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  //渐变色实现===
                  color: new this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    //三种由深及浅的颜色
                    [
                      {
                        offset: 0,
                        color: '#FED1B4',
                      },
                      {
                        offset: 1,
                        color: '#FAFAFB',
                      },
                    ]
                  ),
                },
                color: '#ff8d52',
                //柱子颜色
              },
            },
          }
        ],
      }
    //   let checkedIdx = Number(this.checkedType[0])
    //   if (iconListData) {
    //     if (this.isSetIcon) {
    //       option.series.push(iconListData)
    //     }
    //   } else {
    //     if (option.series.length > 2) {
    //       //如果大于2条折线说明有图标，则做删除操作
    //       option.series.splice(1, 2)
    //     }
    //   }
      if(this.isSetIcon){
          option.series.push(this.iconXConfig);
      }else{
          option.series.splice(1, 1);
      }

     mychart.setOption(option, true) //true,每次调用都重新渲
      //   窗口自适应
      setTimeout(() => {
        window.addEventListener('resize', function () {
          mychart.resize()
        })
      }, 200);
    },
    beforeDestroy() {
      mychart.dispose()
      mychart = null
    },
  },
}
</script>
<style lang='less' scoped>
#shopLineChart {
  width: 100%;
  height: calc(100% - 0.5333rem);
  // height: 0.5333rem;
  // margin-top: 36px;
  .chart_box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    clear: both;
  }
  .icon_checked {
    text-align: center;
    margin-top: 0.33rem;
    .el-checkbox {
      margin-right: 25px;
    }
  }
}
</style>